<template>
    <div class="table-page">
        <div class="table-search-box" @keyup.enter="search()">
            <div class="search-item">
                <label>机构名称：</label>
                <div class="table-query-input">
                    <el-input
                        v-model="queryData.name"
                        clearable
                        placeholder="机构名称"
                    ></el-input>
                </div>
            </div>
            <div class="search-item">
                <label>注册时间：</label>
                <div class="table-query-input">
                    <el-date-picker
                        v-model="queryData.startTime"
                        type="datetime"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        default-time="00:00:00"
                        placeholder="选择注册时间"
                    >
                    </el-date-picker>
                </div>
            </div>
            <div class="search-item">
                <label class="minWidthClear">至：</label>
                <div class="table-query-input">
                    <el-date-picker
                        v-model="queryData.endTime"
                        type="datetime"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        default-time="23:59:59"
                        placeholder="选择注册时间"
                    >
                    </el-date-picker>
                </div>
            </div>
            <div class="search-item">
                <label>所属大区：</label>
                <div class="table-query-input">
                    <el-select
                        v-model="queryData.areaCode"
                        filterable
                        clearable
                        placeholder="请选择大区"
                    >
                        <el-option
                            v-for="item in areas"
                            :key="item.code"
                            :label="item.name"
                            :value="item.code"
                        >
                        </el-option>
                    </el-select>
                </div>
            </div>
            <div class="search-item">
                <label>所属区域：</label>
                <div class="table-query-input">
                    <el-select
                        v-model="queryData.regionCode"
                        filterable
                        clearable
                        placeholder="请选择区域"
                    >
                        <el-option
                            v-for="item in regions"
                            :key="item.code"
                            :label="item.name"
                            :value="item.code"
                        >
                        </el-option>
                    </el-select>
                </div>
            </div>
            <div class="search-item">
                <label>用户类型：</label>
                <div class="table-query-input">
                    <el-select
                        v-model="queryData.groupUserType"
                        clearable
                        placeholder="请选择用户类型"
                    >
                        <el-option label="正式用户" value="formal"></el-option>
                        <el-option label="试用用户" value="trial"></el-option>
                    </el-select>
                </div>
            </div>
            <div class="search-item">
                <label>开通产品：</label>
                <div class="table-query-input">
                    <el-select
                        v-model="queryData.platformType"
                        clearable
                        placeholder="请选择开通产品">
                        <el-option label="全部"></el-option>
                        <el-option label="考研" value="KAOYAN"></el-option>
                        <el-option label="考试库" value="VERS7"></el-option>
                    </el-select>
                </div>
            </div>
            <div class="search-item">
                <label>机构状态：</label>
                <div class="table-query-input">
                    <el-select
                        v-model="queryData.status"
                        clearable
                        placeholder="机构状态">
                        <el-option label="全部"></el-option>
                        <el-option label="有效" value="1"></el-option>
                        <el-option label="无效" value="0"></el-option>
                    </el-select>
                </div>
            </div>
            <div class="search-item">
                <label>到期时间：</label>
                <div class="table-query-input">
                    <el-date-picker
                        v-model="queryData.time1"
                        type="datetime"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        default-time="00:00:00"
                        placeholder="选择到期时间"
                    >
                    </el-date-picker>
                </div>
            </div>
            <div class="search-item">
                <label class="minWidthClear">至：</label>
                <div class="table-query-input">
                    <el-date-picker
                        v-model="queryData.time2"
                        type="datetime"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        default-time="23:59:59"
                        placeholder="选择到期时间"
                    >
                    </el-date-picker>
                </div>
            </div>
            <div class="search-item">
                <el-button
                    type="primary"
                    icon="el-icon-search"
                    :loading="tableLoading"
                    @click="clickSearch()"
                >搜索
                </el-button>
            </div>
            <div class="search-item">
                <el-button
                    icon="el-icon-refresh"
                    :loading="tableLoading"
                    @click="resetSearch()"
                >重置
                </el-button>
            </div>
        </div>
        <div class="table-operation-box">
            <el-button
                type="primary"
                style="margin-bottom: 2em"
                icon="el-icon-plus"
                @click="clickAdd('创建机构')"
            >创建机构
            </el-button>
            <el-button
                type="primary"
                style="margin-bottom: 2em"
                icon="el-icon-plus"
                @click="exportGroup('导出机构列表')"
            >导出机构列表
            </el-button>
        </div>
        <div class="table-data-box">
            <el-table
                ref="table"
                v-loading="tableLoading"
                :data="tableData"
                border
                style="width: 100%;min-height:40em"
                row-key="id"
                default-expand-all
                @selection-change="tableSelectionChange"
            >
                <el-table-column
                    prop="name"
                    label="机构名"
                    min-width="40"
                ></el-table-column>

                <el-table-column
                    prop="userNameOther"
                    label="联系人"
                    width="150"
                ></el-table-column>

                <el-table-column
                    prop="areaName"
                    label="所属大区"
                    width="120"
                ></el-table-column>
                <el-table-column
                    prop="regionName"
                    label="所在地区"
                    width="120"
                ></el-table-column>

                <el-table-column
                    prop="groupUserType"
                    label="用户类型"
                    width="120"
                    align="center"
                >
                    <template slot-scope="scope">
                        <k-tag
                            :tag="groupStatus[scope.row.groupUserType]"
                        ></k-tag>
                    </template>
                </el-table-column>

                <el-table-column
                    prop="createdTime"
                    label="注册时间"
                    min-width="60"
                ></el-table-column>
                <el-table-column prop="status" label="是否有效" width="100">
                    <template slot-scope="scope">
                        <k-tag
                            :tag="
                                scope.row.status
                                    ? { desc: '有效', color: '#6ADA8D' }
                                    : { desc: '失效', color: '#fb4e4e' }
                            "
                        ></k-tag>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="expireTime"
                    label="vers7有效期"
                    width="150"
                ></el-table-column>
                <el-table-column
                    prop="kaoyanExpireTime"
                    label="考研有效期"
                    width="150"
                ></el-table-column>
                <el-table-column
                    label="操作"
                    align="center"
                    width="450"
                    fixed="right"
                >
                    <template slot-scope="scope">
                        <el-button
                            v-if="!scope.row.edit"
                            lass="primary"
                            type="text"
                            size="mini"
                            icon="el-icon-edit"
                            :loading="scope.row.opLoading"
                            @click="
                                clickSimpleEdit(
                                    scope.row,
                                    '机构信息',
                                    null,
                                    groupDetail
                                )
                            "
                        >编辑
                        </el-button>
                        <el-button
                            v-if="!scope.row.edit"
                            lass="primary"
                            type="text"
                            size="mini"
                            icon="el-icon-edit"
                            :loading="scope.row.opLoading"
                            @click="updateExpireTime(scope.row, '续期')"
                        >续期
                        </el-button>
<!--                        <el-button
                            v-if="!scope.row.edit"
                            lass="primary"
                            type="text"
                            size="mini"
                            icon="el-icon-edit"
                            :loading="scope.row.opLoading"
                            @click="updateQRcodeExpireTime(scope.row, '二维码续期')"
                        >二维码续期
                        </el-button>-->
                        <el-button
                            v-if="!scope.row.edit"
                            lass="primary"
                            type="text"
                            size="mini"
                            icon="el-icon-circle-plus-outline"
                            :loading="scope.row.opLoading"
                            @click="groupIp(scope.row, '绑定机构IP')"
                        >绑定机构ip
                        </el-button>
                        <el-button
                            v-if="!scope.row.edit"
                            lass="primary"
                            type="text"
                            size="mini"
                            icon="el-icon-circle-plus-outline"
                            :loading="scope.row.opLoading"
                            @click="groupLocation(scope.row, '绑定机构位置')"
                        >绑定机构位置
                        </el-button>
                        <el-button
                            v-if="!scope.row.edit"
                            lass="primary"
                            type="text"
                            size="mini"
                            icon="el-icon-edit"
                            :loading="scope.row.opLoading"
                            @click="groupPermission(scope.row, '机构权限设置')"
                        >产品权限设置
                        </el-button>
                        <el-button
                            v-if="!scope.row.edit"
                            lass="primary"
                            type="text"
                            size="mini"
                            icon="el-icon-edit"
                            :loading="scope.row.opLoading"
                            @click="groupLog(scope.row, '使用记录')"
                        >使用记录
                        </el-button>
                        <el-button
                            v-if="!scope.row.edit"
                            lass="primary"
                            type="text"
                            size="mini"
                            icon="el-icon-edit"
                            :loading="scope.row.opLoading"
                            @click="link(scope.row, scope.row.name)"
                        >二维码和链接
                        </el-button>
                        <!--                        <el-button-->
                        <!--                            v-if="!scope.row.edit"-->
                        <!--                            lass="primary"-->
                        <!--                            type="text"-->
                        <!--                            size="mini"-->
                        <!--                            icon="el-icon-edit"-->
                        <!--                            :loading="scope.row.opLoading"-->
                        <!--                            @click="-->
                        <!--                                groupLog(scope.row, '使用记录')-->
                        <!--                            "-->
                        <!--                        >使用统计-->
                        <!--                        </el-button>-->

                        <el-button
                            v-if="!scope.row.edit"
                            type="text"
                            size="mini"
                            class="danger"
                            icon="el-icon-delete"
                            :loading="scope.row.opLoading"
                            @click="
                                tableDelete(
                                    '/user/sys/group/delete',
                                    {
                                        id: scope.row.id
                                    },
                                    true
                                )
                            "
                        >删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div v-if="pageData.total" class="xy-between table-page-box">
            <el-pagination
                background
                :current-page.sync="pageData.currentPage"
                :page-sizes="pageData.pageSizes"
                :page-size.sync="pageData.pageSize"
                layout="total,  prev, pager, next, sizes, jumper"
                :total="pageData.total"
            >
            </el-pagination>
        </div>
        <el-dialog
            :title="dialogFormTitle"
            :visible.sync="dialogFormVisible"
            :before-close="dialogClose"
            custom-class="two-dialog"
            width="800px !important"
        >
            <el-form
                ref="dataForm"
                :model="dataForm"
                label-width="8em"
                :rules="dataFormRule"
            >
                <div class="row">
                    <el-form-item label="机构类型" prop="type">
                        <el-select
                            v-model="dataForm.type"
                            placeholder="机构类型"
                            :disabled="!dataForm.addAction"
                        >
                            <el-option
                                v-for="item in type"
                                :key="item.code"
                                :label="item.desc"
                                :value="item.code"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="机构名称" prop="name">
                        <el-input v-model="dataForm.name"></el-input>
                    </el-form-item>
                </div>

                <div class="row">
                    <el-form-item prop="userName" label="联系人">
                        <el-input v-model="dataForm.userName"></el-input>
                    </el-form-item>
                    <el-form-item prop="mobile" label="联系方式">
                        <el-input v-model="dataForm.mobile"></el-input>
                    </el-form-item>
                </div>
                <div class="row">
                    <el-form-item prop="email" label="联系邮箱">
                        <el-input v-model="dataForm.email"></el-input>
                    </el-form-item>
                    <el-form-item prop="yCode" label="邮编">
                        <el-input v-model="dataForm.yCode"></el-input>
                    </el-form-item>
                </div>
                <div class="row">
                    <el-form-item label="所属大区" prop="areaCode">
                        <el-select
                            v-model="dataForm.areaCode"
                            placeholder="请选择大区"
                        >
                            <el-option
                                v-for="item in areas"
                                :key="item.code"
                                :label="item.name"
                                :value="item.code"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="所属区域" prop="regionCode">
                        <el-select
                            v-model="dataForm.regionCode"
                            filterable
                            clearable
                            placeholder="请选择区域"
                        >
                            <el-option
                                v-for="item in regions"
                                :key="item.code"
                                :label="item.name"
                                :value="item.code"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                </div>
                <div class="row">
                    <el-form-item label="用户类型" prop="groupUserType">
                        <el-select
                            v-model="dataForm.groupUserType"
                            placeholder="机构类型"
                        >
                            <el-option
                                v-for="item in status"
                                :key="item.code"
                                :label="item.desc"
                                :value="item.code"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="到期时间" prop="expireTime">
                        <el-date-picker
                            v-model="dataForm.expireTime"
                            :picker-options="datePickOption"
                            type="date"
                            value-format="yyyy-MM-dd"
                            placeholder="选择到期时间"
                        >
                        </el-date-picker>
                    </el-form-item>
                </div>
                <div class="row">
                    <el-form-item label="统计开放" prop="statisticalOpen">
                        <el-radio-group v-model="dataForm.statisticalOpen">
                            <el-radio :label="false">否</el-radio>
                            <el-radio :label="true">是</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="统计显示" prop="statisticalShow">
                        <el-radio-group v-model="dataForm.statisticalShow">
                            <el-radio :label="false">原始数据</el-radio>
                            <el-radio :label="true">设置数据</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </div>
                <div class="row">
                    <el-form-item label="前台显示名称" prop="alias">
                        <el-input v-model="dataForm.alias"></el-input>
                    </el-form-item>
                    <el-form-item prop="address" label="地址">
                        <el-input v-model="dataForm.address"></el-input>
                    </el-form-item>
                </div>
                <div v-if="dataForm.addAction" class="row">
                    <el-form-item label="登录账号" prop="account">
                        <el-input v-model="dataForm.account"></el-input>
                    </el-form-item>
                    <el-form-item label="登录密码" prop="pass">
                        <el-input v-model="dataForm.pass"></el-input>
                    </el-form-item>
                </div>
                <div class="row">
                    <el-form-item label="是否替换前台显示名称" prop="showAlias">
                        <el-radio-group v-model="dataForm.showAlias">
                            <el-radio :label="false"
                            >默认显示"机构名称"
                            </el-radio
                            >
                            <el-radio :label="true"
                            >替换显示"前台显示名称"
                            </el-radio
                            >
                        </el-radio-group>
                    </el-form-item>
                </div>
                <el-form-item label="备注" prop="remark">
                    <el-input
                        v-model="dataForm.remark"
                        type="textarea"
                        rows="5"
                    ></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button :loading="submitFlag" @click="dialogClose"
                >取 消</el-button
                >
                <el-button
                    :loading="submitFlag"
                    type="primary"
                    @click="formDataSave('/user/sys/group/update', dataCover)"
                >保 存</el-button
                >
            </span>
        </el-dialog>
        <el-dialog
            :title="expireTimeFormTitle"
            :visible.sync="expireTimeFormVisible"
            :before-close="expireTimeDialogClose"
            custom-class="two-dialog"
        >
            <el-form
                ref="expireTimeFormRef"
                :model="expireTimeForm"
                label-width="8em"
                :rules="expireTimeFormRule"
            >
                <el-form-item label="机构名称" prop="name">
                    <el-input v-model="expireTimeForm.name"></el-input>
                </el-form-item>
                <el-form-item label="原有到期时间" prop="oldExpireTime">
                    <el-date-picker
                        v-model="expireTimeForm.oldExpireTime"
                        type="date"
                        disabled
                        value-format="yyyy-MM-dd"
                        placeholder="选择到期时间"
                    >
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="新到期时间" prop="newExpireTime">
                    <el-date-picker
                        v-model="expireTimeForm.newExpireTime"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="选择到期时间"
                    >
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="备注" prop="remark">
                    <el-input
                        v-model="expireTimeForm.remark"
                        type="textarea"
                        rows="5"
                    ></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button :loading="submitFlag" @click="expireTimeDialogClose"
                >取 消</el-button
                >
                <el-button
                    :loading="submitFlag"
                    type="primary"
                    @click="expireTimeFormSave()"
                >保 存</el-button
                >
            </span>
        </el-dialog>
        <el-dialog
            :title="expireTimeQRcodeFormTitle"
            :visible.sync="expireTimeQRcodeFormVisible"
            :before-close="expireTimeDialogClose"
            custom-class="two-dialog"
        >
            <el-form
                ref="expireTimeQRcodeFormRef"
                :model="expireTimeQRcodeForm"
                label-width="8em"
                :rules="expireTimeQRcodeFormRule"
            >
                <el-form-item label="机构名称" prop="name">
                    <el-input v-model="expireTimeQRcodeForm.name" disabled></el-input>
                </el-form-item>
                <el-form-item label="到期时间" prop="newExpireTime">
                    <el-date-picker
                        v-model="expireTimeQRcodeForm.qrCodeExpire"
                        type="date"
                        value-format="yyyy-MM-dd HH:MM:SS"
                        placeholder="选择到期时间"
                    >
                    </el-date-picker>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button :loading="submitFlag" @click="expireTimeQRcodeDialogClose"
                >取 消</el-button
                >
                <el-button
                    :loading="submitFlag"
                    type="primary"
                    @click="expireTimeQRcodeFormSave()"
                >保 存</el-button
                >
            </span>
        </el-dialog>
        <el-dialog
            :title="groupLogFormTitle"
            :visible.sync="groupLogFormVisible"
            width="80%"
        >
            <div class="el-dialog-div">
                <group-log-component
                    v-if="groupLogFormVisible"
                    ref="groupLogFormRef"
                    :group-id="groupLogGrupId"
                >
                </group-log-component>
            </div>
        </el-dialog>
        <el-dialog
            :title="groupPermissionFormTitle"
            :visible.sync="groupPermissionFormVisible"
            width="60%"
        >
            <div class="el-dialog-div">
                <group-permission-component
                    v-if="groupPermissionFormVisible"
                    ref="groupPermissionFormRef"
                    :group-id="groupPermissionGrupId"
                    @close="closePermission"
                >
                </group-permission-component>
            </div>
        </el-dialog>
        <el-dialog
            :title="groupIpFormTitle"
            :visible.sync="groupIpFormVisible"
            width="80%"
        >
            <div class="el-dialog-div">
                <group-ip-component
                    v-if="groupIpFormVisible"
                    ref="groupIpFormRef"
                    :group-id="groupIpGrupId"
                >
                </group-ip-component>
            </div>
        </el-dialog>
        <el-dialog
            :title="groupLocationFormTitle"
            :visible.sync="groupLocationFormVisible"
            width="80%"
        >
            <div class="el-dialog-div">
                <group-location-component
                    v-if="groupLocationFormVisible"
                    ref="groupLocationFormRef"
                    :group-id="groupLocationGrupId"
                >
                </group-location-component>
            </div>
        </el-dialog>
        <el-dialog
            :title="groupLinkFormTile+'-二维码和链接'"
            :visible.sync="groupLinkFormVisible"
            width="30%"
            @open="linkOpen"
            @close="linkClose"
        >
            <div class="link-div">
                <div style="text-align: center">
                    <vue-qr
                        ref="Qrcode"
                        :text="groupLinkQRCode"
                        :size="250"
                        >
                    </vue-qr>
                    <p @click="download" style="margin-top: 20px;cursor: pointer">点击下载</p>
                </div>
                <div>
                    <h2 style="color: red">微信题库H5链接:</h2>
                    <p style="font-size: 20px">{{ groupLink }}</p>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import {TablePage, objSign} from "@/layout/mixin/iVue.js";
import {mapState} from "vuex";
import {get, put, post} from "@/api/request";
import groupLogComponent from "@/views/models/vrs/group/groupRenewalLog";
import groupIpComponent from "@/views/models/vrs/group/groupIp";
import groupLocationComponent from "@/views/models/vrs/group/groupLocation";
import groupPermissionComponent from "@/views/models/vrs/group/groupPermission";
import {checkMobileExits, exportGroup} from "@/api/user";
import {isMobile} from "@/utils/validate.js";
import VueQr from "vue-qr";

export default {
    name: "Group",
    components: {
        groupLogComponent,
        groupIpComponent,
        groupLocationComponent,
        groupPermissionComponent,
        VueQr
    },
    mixins: [TablePage],
    props: {
        groupIpId: {
            type: Number,
            default: null
        }
    },
    data() {
        return {
            queryData: {
                base: true,
                name: null,
                registerDay: null,
                expireTime: null,
                areaCode: null,
                regionCode: null,
                groupUsertype: null,
                time1: null,
                time2: null
            },
            datePickOption: {
                disabledDate(time) {
                    return time.getTime() < Date.now() - 24 * 60 * 60 * 1000;
                }
            },
            initAddForm: {
                id: null,
                name: null,
                type: "center",
                userName: null,
                mobile: null,
                email: null,
                yCode: null,
                address: null,
                areaCode: null,
                regionCode: null,
                groupUserType: "formal",
                expireTime: null,
                statisticalOpen: false,
                statisticalShow: false,
                showAlias: false,
                remark: null,
                alias: null,
                other: null,
                account: "",
                pass: ""
            },
            areas: null,
            regions: null,
            flag: {
                areaFlag: false,
                regionFlag: false,
                regionFlag2: false
            },
            status: [
                {
                    code: "trial",
                    desc: "试用用户"
                },
                {
                    code: "formal",
                    desc: "正式用户"
                }
            ],
            type: [
                {
                    code: "center",
                    desc: "中心机构"
                },
                {
                    code: "mirror",
                    desc: "镜像机构"
                }
            ],
            dataFormRule: {
                name: [
                    {
                        required: true,
                        message: "请输入机构名称",
                        trigger: "blur"
                    },
                    {
                        min: 2,
                        max: 20,
                        message: "长度在 2 到 20 个字符",
                        trigger: "blur"
                    }
                ],
                type: [
                    {
                        required: true,
                        message: "选择机构类型",
                        trigger: "change"
                    }
                ],
                userName: [
                    {
                        required: true,
                        message: "请输入联系人",
                        trigger: "blur"
                    }
                ],
                mobile: [
                    {
                        required: true,
                        message: "请输入联系方式",
                        trigger: "blur"
                    },
                    {
                        validator: (rule, value, callback) => {
                            if (value) {
                                if (isMobile(value)) {
                                    callback();
                                } else {
                                    callback(new Error("请输入正确的手机号"));
                                }
                            }
                        },
                        trigger: "blur"
                    }
                ],
                areaCode: [
                    {
                        required: true,
                        message: "请选择大区",
                        trigger: "change"
                    }
                ],
                regionCode: [
                    {
                        required: true,
                        message: "请选择区域",
                        trigger: "change"
                    }
                ],
                groupUserType: [
                    {
                        required: true,
                        message: "请选择用户类型",
                        trigger: "change"
                    }
                ],
                expireTime: [
                    {
                        required: true,
                        message: "请选择到期时间",
                        trigger: "blur"
                    }
                ]
            },
            expireTimeFormTitle: null,
            expireTimeFormVisible: false,
            expireTimeQRcodeFormTitle: null,
            expireTimeQRcodeFormVisible:false,
            expireTimeQRcodeForm:{
                id:null,
                qrCodeExpire:null
            },
            expireTimeForm: {
                id: null,
                name: null,
                oldExpireTime: null,
                newExpireTime: null,
                remark: null
            },
            expireTimeFormRule: {
                newExpireTime: [
                    {
                        required: true,
                        message: "请选择到期时间",
                        trigger: "blur"
                    }
                ]
            },
            expireTimeQRcodeFormRule:{

                qrCodeExpire: [
                    {
                        required: true,
                        message: "请选择到期时间",
                        trigger: "blur"
                    }
                ]
            },
            groupLogFormTitle: null,
            groupLogFormVisible: false,
            groupLogGrupId: null,
            groupIpFormTitle: null,
            groupIpFormVisible: false,
            groupIpGrupId: null,
            groupLocationFormTitle: null,
            groupLocationFormVisible: false,
            groupLocationGrupId: null,
            groupPermissionFormTitle: null,
            groupPermissionFormVisible: false,
            groupPermissionGrupId: null,
            groupLinkFormVisible: false,
            groupLinkFormTile: null,
            GroupLinkGroupId: null,
            groupLinkQRCode: null,
            groupLink: null
        };
    },
    computed: {
        ...mapState({
            groupStatus: state => state.status.groupStatus
        })
    },
    watch: {},
    created() {
        this.loadArea();
        this.loadRegion();
    },
    mounted() {
    },
    methods: {
        search(queryData) {
            this.loadTable("/user/sys/group/page", queryData, true);
        },
        exportGroup(title) {
            exportGroup(this.removeNullKey(this.queryData)).then(res => {
                window.location.href =
                    "https://vipcdn.langrundata.com/" +
                    res;
            });
        },

        removeNullKey(data) {
            let res = {...data};
            Object.keys(data).forEach(k => {
                if (
                    data[k] === null ||
                    data[k] === undefined ||
                    data[k] === ""
                ) {
                    delete res[k];
                }
            });
            return res;
        },
        dataCover() {
            let obj = {...this.dataForm};
            if (!obj.addAction) {
                obj.permission = null;
            }
            return obj;
        },
        updateExpireTime(data, title) {
            this.expireTimeFormVisible = true;
            this.expireTimeFormTitle = title;
            this.expireTimeForm.id = data.id;
            this.expireTimeForm.name = data.name;
            this.expireTimeForm.oldExpireTime = data.expireTime;
            this.expireTimeForm.newExpireTime = null;
            this.expireTimeForm.remark = null;
        },
        expireTimeDialogClose() {
            this.expireTimeFormVisible = false;
        },
        updateQRcodeExpireTime(data, title){
            this.expireTimeQRcodeFormVisible = true;
            this.expireTimeQRcodeFormTitle = title;
            this.expireTimeQRcodeForm.id = data.id;
            this.expireTimeQRcodeForm.name = data.name;
            this.expireTimeQRcodeForm.qrCodeExpire = data.qrCodeExpire;

        },
        expireTimeQRcodeDialogClose() {
            this.expireTimeQRcodeFormVisible = false;
        },
        expireTimeQRcodeFormSave(){
            this.$refs.expireTimeQRcodeFormRef.validate(valid => {
                if (valid) {
                    this.submitFlag = true;
                    put("/user/sys/group/update", this.expireTimeQRcodeForm)
                        .then(res => {
                            this.expireTimeQRcodeFormVisible = false;
                            this.search();
                        })
                        .finally(() => {
                            this.submitFlag = false;
                        });
                } else {
                    j();
                }
            });

        },
        groupLog(data, title) {
            this.groupLogFormVisible = true;
            this.groupLogFormTitle = title;
            this.groupLogGrupId = data.id;
        },
        link(data, title) {
            this.groupLinkFormVisible = true;
            this.groupLinkFormTile = title;
            this.GroupLinkGroupId = data.id;
        },
        linkClose() {
            this.groupLinkQRCode = null;
            this.groupLink = null;

        },
        download() {
            const iconUrl = this.$refs.Qrcode.$el.src
            let a = document.createElement("a")
            let event = new MouseEvent("click")
            a.download = this.groupLinkFormTile+"-二维码"
            a.href = iconUrl
            a.dispatchEvent(event)
        },
        linkOpen() {
            get("/user/sys/group/wecat-xcx-qrcode", {groupId: this.GroupLinkGroupId, envVersion: "trial"}).then(res => {
                this.groupLinkQRCode = res
            })
            get("/user/sys/group/h5-group-link", {groupId: this.GroupLinkGroupId}).then(res => {
                this.groupLink = res

            })
        }
        ,
        groupPermission(data, title) {
            this.groupPermissionFormVisible = true;
            this.groupPermissionFormTitle = title;
            this.groupPermissionGrupId = data.id;
        }
        ,
        closePermission(flag) {
            this.groupPermissionFormVisible = false;
        }
        ,
        groupIp(data, title) {
            this.groupIpFormVisible = true;
            this.groupIpFormTitle = title;
            this.groupIpGrupId = data.id;
        }
        ,
        groupLocation(data, title) {
            this.groupLocationFormVisible = true;
            this.groupLocationFormTitle = title;
            this.groupLocationGrupId = data.id;
        }
        ,
        groupDetail(row) {
            return {
                ...row,
                username: "",
                pass: ""
            };
        }
        ,
        expireTimeFormSave() {
            this.$refs.expireTimeFormRef.validate(valid => {
                if (valid) {
                    this.submitFlag = true;
                    put("/user/sys/group/update-expire", this.expireTimeForm)
                        .then(res => {
                            this.expireTimeFormVisible = false;
                            this.search();
                        })
                        .finally(() => {
                            this.submitFlag = false;
                        });
                } else {
                    j();
                }
            });
        }
        ,
        loadArea(query) {
            return this.flagPromise(
                get("/user/sys/dict/detail/listByTypeCode", {
                    name: query,
                    typeCode: "area"
                }).then(res => {
                    this.areas = res;
                    return res;
                }),
                "areaFlag"
            );
        }
        ,
        loadRegion() {
            this.regions = [];
            this.queryData.regionCode = null;
            return this.flagPromise(
                get("/user/sys/dict/detail/listByTypeCode", {
                    typeCode: "region"
                }).then(res => {
                    this.regions = res;
                    return res;
                }),
                "regionFlag"
            );
        }
    }
}
;
</script>

<style lang="scss" scoped>
.step {
    padding: 0.3rem 0;
    background: #f1f1f1;
}

.link-div {
    display: flex;
    justify-content: space-between;
}

.setting-process {
    .setting-p {
        margin: 0.7em 0;
    }

    .cover {
        width: 6em;
        height: 8rem;
        border-radius: 0.4rem;
        border: 1px solid #ececec;
        margin-bottom: 0.2rem;
    }
}

.drawer {
    position: relative;

    .records {
        position: absolute;
        left: 0;
        bottom: 2em;
        width: 100%;

        .p-title {
            margin-bottom: 30px;
        }

        .step {
            overflow: auto;
        }

        .icon-header {
            width: 30px;
            border-radius: 50%;
        }

        .row-til {
            white-space: nowrap;
        }
    }

    .op-box {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        padding: 0.3em 0;
        box-shadow: 0px 0px 14px -8px rgba(0, 0, 0, 0.67);
    }
}
</style>
<style>
.group.i-dialog {
    margin-top: 5vh !important;
    width: fit-content;
}

.header .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.header .avatar-uploader .el-upload:hover {
    border-color: #409eff;
}

.header .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.header .avatar {
    width: 178px;
    height: 178px;
    display: block;
}
.minWidthClear {
    min-width: 2em !important;
}
</style>
